<html>
<head>
<link rel="stylesheet" type="text/css" href="http://muhammad-septi-rosidi.googlecode.com/svn/colorpicker.css" media="all" />
<script type='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'>
</script> 
<script type="text/javascript" src="http://muhammad-septi-rosidi.googlecode.com/svn/jquery.validation-engine.js"></script>
<script type="text/javascript" src="http://muhammad-septi-rosidi.googlecode.com/svn/color-picker.js"></script>
<script type="text/javascript" src="http://muhammad-septi-rosidi.googlecode.com/svn/widget.js"></script>
<title>Generator Of Top Commentators Widget with Avatar</title>
<style type="text/css">
.text-input, .select-box{
	margin:0 2px;
	padding:4px 6px;
	border: 1px solid #222222;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-family: gergia;
	font-style: italic;

	-webkit-box-shadow: 1px 1px 1px #222222;
	-moz-box-shadow: 1px 1px 1px #222222;
	box-shadow: 1px 1px 1px #222222;
	font-size: 14px;
	color: #666;
	max-width:auto;
}

			body { font-family: Verdana, Arial;margin: 0;padding: 0;text-align: left;font-size:18px;color:#222222;
}

label       { font-family: Verdana, Arial;margin: 0;padding: 0;text-align: left;font-size:15px; font-weight:bold; }

fieldset    { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #222222; }
			#outer-wrapper {font-family: Verdana, Arial;}
			#content-wrapper { width: 98%; max-widtd:980px;  margin: 0 auto;  padding: 5px;  text-align: left; 
background:#BADA55;
border:2px solid #222222;
-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
}
			#content-wrapper h2 {text-align:center;font-size:20px;margin: 5px 0 1em ;padding: 3px 10px;background-color: #222222;font-size:16px;color:#F0F6FB;border:1px solid #222222;
-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
}
			.redi{-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }

.button {
	background: #f7f8f9;
	background: -webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
	background: -moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
	background: -o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
	background: -ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
	background: linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
	border: 1px solid #ddd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 6px 12px;
	margin:0;
	-webkit-box-shadow: 0 0 1px #f9f9f9 inset, 1px 1px 1px #dfdfdf;
	-moz-box-shadow: 0 0 1px #f9f9f9 inset, 1px 1px 1px #dfdfdf;
	box-shadow: 0 0 1px #f9f9f9 inset, 1px 1px 1px #dfdfdf;
	color: #888;
	text-shadow: 0 1px 0 #fff;
	line-height: 1.2;
	cursor: pointer;
	font-size: 13px;
}
.button:hover{
	background: #f1f1f1;
	background: -webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
	background: -moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
	background: -o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
	background: -ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
	background: linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
	text-decoration:none !important;
}
		</style>
<script type='text/javascript'>
//<!--
function tutorialblogspotcodegen(){
var numco = document.getElementsByName("tbnumcom")[0].value;
var avtarsize = document.getElementsByName("tbavsize")[0].value;
var roundav = document.getElementsByName("tbroundav")[0].value;
var defaultavatar = document.getElementsByName("tbdefaultavatar")[0].value;
var blogurl = document.getElementsByName("tbblogurl")[0].value;
var avbor = document.getElementsByName("tbavbor")[0].value;
var comlinkcolo = document.getElementsByName("tbcomlinkcolo")[0].value;
var widget = document.getElementsByName("widget.content")[0];
widget.value = "";
widget.value += "<style type=\"text\/css\">";
widget.value += ".top-commenter-line,.top-commenter-line a, .top-commenter-line .profile-name-link a{";
widget.value += "font-family:, arial, sans-serif;";
widget.value += "color: #"+ comlinkcolo +"; text-decoration: none;font-size: 14px;}";
widget.value += ".top-commenter-line:hover,.top-commenter-line a:hover, .top-commenter-line .profile-name-link a:hover{";
widget.value += "color: #"+ comlinkcolo +"; text-shadow: 0px 1px 1px #"+ comlinkcolo +";";
widget.value += "font-size: 14px; text-decoration: none;}";
widget.value += ".top-commenter-line {margin: 3px 0;}";
widget.value += ".top-commenter-line .profile-name-link {padding-left:0;}";
widget.value += ".top-commenter-avatar {vertical-align:middle;}";
widget.value += "ul.top-commenter {list-style:none;margin:0;padding:0;}";
widget.value += ".top-commenter li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}.top-commenter li";
widget.value += ".top-commenter-avatar{ ";
widget.value += "padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}";
widget.value += ".top-commenter-avatar{-webkit-border-radius:"+ roundav +"px;-moz-border-radius:"+ roundav +"px;border-radius:"+ roundav +"px;";
widget.value += "border:solid 2px #"+ avbor +";}.top-commenter li img{padding:0px;position:relative;overflow:hidden;display:block;}";
widget.value += ".top-commenter li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}";
widget.value += "<\/style>";
widget.value += "<script type=\"text\/javascript\">";
widget.value += "       var maxTopCommenters  = "+ numco +";";
widget.value += "       var sizeAvatar        = "+ avtarsize +";";
widget.value += "       var urlAnoAvatar      = '"+ defaultavatar +"&s=' + sizeAvatar;";
widget.value += "<\/script>";
widget.value += "<script type=\"text\/javascript\" src=\"http:\/\/muhammad-septi-rosidi.googlecode.com\/svn\/www.tutorialblogspot.com-top-commentators.js\"><\/script>";
widget.value += "<script type=\"text\/javascript\" src=\""+ blogurl +"\/feeds\/comments\/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters\"><\/script>";
widget.value += "<script type=\"text\/javascript\">";
widget.value += "document.write( unescape( '%3C%70%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%22%3E%54%6F%70%20%43%6F%6D%6D%65%6E%74%61%74%6F%72%73%20%57%69%64%67%65%74%20%77%69%74%68%20%41%76%61%74%61%72%20%62%79%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%74%75%74%6F%72%69%61%6C%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%3E%54%75%74%6F%72%69%61%6C%20%42%6C%6F%67%73%70%6F%74%3C%2F%61%3E%3C%2F%70%3E' ) );";
widget.value += "<\/script>";
document.getElementsByName("go")[0].disabled=false;
}
//-->
</script>

</head>
<body>
<div id='content-wrapper'>
<h2>Generator Of Top Commentators Widget with Avatar</h2>
<fieldset class='redi'><legend class='redi' align='left' style='background:#222222; font-size:16px;color:#FFFFFF; padding:3px 10px;margin-left:20px;'>Settings</legend><br>
<form action="http://www.blogger.com/add-widget" method="post" target="_blank">
<table width="100%">

<tr>
<td width='60%'><label for='name='widget.title'>Widget title</label>:</td>
<td width='40%'>&nbsp;&nbsp;<input class='text-input' type='text' name='widget.title' value='Top Commentators' size='25'></td>
</tr>
<tr></tr>

<tr>
<td width='60%'><label for='tbblogurl'>Blog URL</label>:</td>
<td width='40%'>&nbsp;&nbsp;<input class='text-input' type='text' name='tbblogurl' value='http://www.tutorialblogspot.com' size='25'></td>
</tr>
<tr></tr>
<tr>
<td width='60%'><label for='tbnumcom'>Number of Top Commentators</label></td>
<td width='40%'>&nbsp;&nbsp;<input class='text-input' type='text' name='tbnumcom' value='5' size='6'></td>
</tr>
<tr></tr>
<tr>
<td width='60%'><label for='tbavsize'>Avatar Image Size</label></td>
<td width='40%'>&nbsp;&nbsp;<input class='text-input' type='text' name='tbavsize' value='60' size='6'></td>

</tr>
<tr></tr>
<tr>
<td width='60%'><label for='tbavbor'>Avatar Image Border Color</label></td>
<td width='40%'>#<input class='inputcolor text-input' type='text' name='tbavbor' value='cccccc' size='6'><span
class="colorbox"></td>
</tr>
<tr></tr>
<tr>
<td width='60%'><label for='tbcomlinkcolo'>Commentators Link Color</label></td>
<td width='40%'>#<input class='inputcolor text-input' type='text' name='tbcomlinkcolo' value='000000' size='6'><span
class="colorbox"></td>
</tr>
<tr></tr>
<tr>

<td width='60%'><label for='tbroundav'>Rounded Avatar Image?</label></td>
<td width='40%'>&nbsp;&nbsp;
<select class='select-box' id='tbroundav'  name='tbroundav'>
<option value='100'>Yes</option>
<option value='0'>No</option> 
</select></td></tr>
<tr></tr>
<tr>
<td width='60%'><label for='tbdefaultavatar'>Default Avatar Image URL</label></td>
<td width='40%'>&nbsp;&nbsp;<input class='text-input' type='text' name='tbdefaultavatar' value='http://www.gravatar.com/avatar/?d=mm' size='25'></td>
</tr>
</table>
</fieldset>

<br>
<center><input style="width:180px; font-weight:bold;font-size:20px; " value="Generate" onclick="javascript:tutorialblogspotcodegen();" type="button">
<input style="width:180px; font-weight:bold;font-size:20px; " disabled="disabled" name="go" value="Add to Blogger" type="submit"><br><textarea name="widget.content" style="display:none;"></textarea><input name="infoUrl" value="http://www.tutorialblogspot.com" type="hidden"><input name="logoUrl" value="https://lh5.googleusercontent.com/-4HqneSz6nCM/UCjjrdx_BYI/AAAAAAAABYY/4IAln1UxpZk/s248/tutorial%2520blogspot.gif" type="hidden"></form></center>
<br><br>
<center><small> Copyright &copy; 2012 All Rights Reserved by Muhammad Septi Rosidi of <a href='http://www.tutorialblogspot.com/'>tutorialblogspot</a></small></center>
</div>
</body>
</html>